<template>
	<view class="wrapper">
    <scroll-view scroll-y="false">
		<view>
      <template v-for="dir in menus">
        <u-card v-if="dir.type === '0' && dir.isShow === '1'" :key="dir.menuId" :title="dir.title">
			<view slot="body">
          <template v-for="menu in dir.children">
            <template v-if="menu.type === '1' && menu.isShow === '1'">
              <menu-card
                v-if="menu.shape === '1'"
                :key="menu.menuId"
                :src="menu.icon"
                @click="onMenu(menu)"
              />
              <menu-item
                v-else
                :key="menu.menuId"
                :src="menu.icon"
                :title="menu.title"
                @click="onMenu(menu)"
              />
            </template>
          </template>
			</view>
        </u-card>
      </template>
	  </view>
	  <u-tabbar v-model="current" :list="list" active-color="#2FE1B7" :mid-button="false" @change="tabberChange"></u-tabbar>
    </scroll-view>

    <!-- 子菜单 -->
    <popup-bottom-menu
      v-model="showPopup"
      text-key="title"
      :direction="'flex-start'"
      :menu-list="popupMenus"
      close-on-click-overlay
      @on-menu-click="onMenu"
    />
	<empty-data v-if="!menus.length" text="该角色没有对应的菜单!" />
  </view>
</template>

<script>
  import { phoneMenu } from '@api/home';
  import MenuItem from '@components/modules/home/components/menu-item';
  import MenuCard from '@components/modules/home/components/menu-card';
  // import MenuModule from '@views/home/components/menu-module';
  import PopupBottomMenu from '@components/common/popup-bottom-menu';
  import { isEmpty } from '@common/utils';
  import { mapGetters, mapMutations } from 'vuex';

  export default {
	components: { MenuItem, MenuCard, PopupBottomMenu },
    data() {
      return {
        showPopup: false,
        popupMenus: [],
        menus: [],
		count: 4,
		show: false,
		checked: true,
		title: '素胚勾勒出青花，笔锋浓转淡',
		list: [
			{
				iconPath: "../../../../../static/home/home@2x.png",
				selectedIconPath: "../../../../../static/home/home--active@2x.png",
				text: '首页',
				isDot: false,
				customIcon: false,
			},
			{
				iconPath: "../../../../../static/home/todo@2x.png",
				selectedIconPath: "../../../../../static/home/todo--active@2x.png",
				text: '待办',
				customIcon: false,
			},
			{
				iconPath: "../../../../../static/home/user@2x.png",
				selectedIconPath: "../../../../../static/home/user--active@2x.png",
				text: '我的',
				midButton: true,
				customIcon: false,
			}
		],
		current: 0
      };
    },
    computed: {
      ...mapGetters('user', ['userRole'])
    },
    watch: {
      userRole: 'getPhoneMenu'
    },
    created() {
      this.getPhoneMenu();
    },
    methods: {
      ...mapMutations('attendance', ['initCurdate']),
      getPhoneMenu() {
        const { placeRoleId } = this.userRole;

        if (isEmpty(placeRoleId)) return false;

        phoneMenu(placeRoleId).then(({ success, msg, data }) => {
          this.menus = success ? sort(data) : [];
        }).catch((e) => {
			console.log(e, 'e')
		})

        const sort = (array) => {
          for (let i = 0; i < array.length; i++) {
            if (!isEmpty(array[i].children)) {
              array[i].children = sort(array[i].children);
            }
          }
          return array.sort((a, b) => a.sort - b.sort);
        };
      },
      onMenu(menu = {}) {
        if (!isEmpty(menu.children)) {
          this.popupMenus = menu.children;
          return (this.showPopup = true);
        }
        if (menu.name) this.$router.push(menu.name);
      },
	  tabberChange(v) {
		  console.log(v)
	  }
    },
    beforeRouteLeave(to, from, next) {
      if (to.path === '/attendance/dorm-admin') {
        this.initCurdate();
      }
      next();
    }
  };
</script>

<style scoped lang="less">
  /deep/ .card__title {
    font-size: 20px;
    font-weight: 500;
  }

  .menu,
  .van-popup {
    /deep/ .van-grid-item__icon {
      font-size: 59px;
    }

    /deep/ .van-grid-item__text {
      font-size: 14px;
      line-height: 20px;
    }
  }

  .module /deep/ .card-content {
    display: flex;
  }

  .menu-module {
    flex: 1;
  }
</style>
